---
title: Panduan Migrasi
---

# Panduan Migrasi

## Migrasi RainbowKit

### Perubahan besar 2.x.x

Kebergantungan peer [wagmi](https://wagmi.sh) dan [viem](https://viem.sh) telah mencapai `2.x.x` dengan perubahan besar.

Ikut langkah di bawah untuk beralih.

**1. Naik taraf RainbowKit, `wagmi`, dan `viem` ke versi terkini**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**2. Pasang kebergantungan rakan sebaya `@tanstack/react-query`**

Dengan Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) kini merupakan kebergantungan peer yang diperlukan.

Pasang ia dengan arahan berikut:

```bash
npm i @tanstack/react-query
```

**3. Naik taraf konfigurasi RainbowKit dan Wagmi anda**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. Semak perubahan besar dalam `wagmi` dan `viem`**

Jika anda menggunakan `wagmi` hooks dan `viem` actions dalam dApp anda, anda perlu mengikuti panduan beralih untuk v2:

- [Panduan Berlaih Wagmi v2](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Perubahan Mendasar Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Perubahan RainbowKit

**1. Kelakuan yang dipertingkatkan untuk dompet EIP-6963**

Dompet yang menyokong standard sambungan EIP-6963 yang baru (termasuk Rainbow, MetaMask dan lain-lain) kini secara automatik akan dipaparkan dalam seksyen `Dipasang` semasa pengalaman Menghubungkan Wallet. Ini memastikan bahawa pengguna sentiasa dapat mencari dompet kegemaran mereka dan menghubungkan ke dApps tanpa konflik atau butang gantian.

Pembangun terus mempunyai kawalan penuh ke atas Senarai Dompet Khusus untuk menekankan dompet yang disukai untuk pengguna akhir. Adalah digalakkan agar anda terus menyertakan `injectedWallet` dan `walletConnectWallet` dalam senarai anda untuk menyokong semua platform.

**2. Konfigurasi Wagmi dengan getDefaultConfig**

API baru ini memudahkan pengalaman konfigurasi dan menggantikan keperluan untuk menggunakan secara langsung `createConfig` Wagmi. Konfigurasi rangkaian diperbaharui, termasuk penyedia awam yang disimpulkan untuk `transports`.

Senarai dompet lalai akan dipaparkan secara automatik, menghapuskan keperluan untuk menggunakan `getDefaultWallets` dan `connectorsForWallets`.

Anda boleh membuat Senarai Dompet Khusus dengan memajukan penyambung Dompet import atau Khusus ke `wallets`. Memulakan penyambung dompet dan memajukan `projectId` dan `chains` tidak lagi diperlukan.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

Anda tidak lagi perlu menyampaikan `chains` kepada `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. Rangkaian Khusus**

Jenis `Chain` telah berubah selaras dengan Wagmi v2, dan terus menyokong metadata `iconUrl` dan `iconBackground` RainbowKit.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Contoh dengan `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

Contoh dengan `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. Dompet Khusus**

Penyambung dompet RainbowKit telah mengalami perubahan yang ketara untuk menyokong Wagmi v2. Rujuk [dokumen yang dikemas kini](https://www.rainbowkit.com/docs/custom-wallets) dan [penyambung contoh](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) untuk menaik taraf sebarang Penyambung Dompet Khusus dalam dApp anda.

Penyambung dompet kini juga menyokong standard EIP-6963 dengan prop `rdns`. Pastikan bahawa ini diisi untuk mengelakkan rujukan berganda kepada dompet yang menyokong EIP-6963 dalam senarai dompet anda.

### Perubahan besar 1.x.x

#### Dikemaskan kepada wagmi v1

Kebergantungan rakan sebaya [wagmi](https://wagmi.sh) telah dikemaskini kepada `1.x.x`.

Ikut langkah di bawah untuk beralih.

**1. Naik taraf RainbowKit dan `wagmi` ke versi terkini**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**2. Pasang kebergantungan rakan sebaya `viem`**

wagmi v1 memerlukan kebergantungan rakan sebaya `viem`. Pasang dengan arahan berikut:

```bash
npm i viem
```

**3. Pastikan keserasian bundler dan polyfill**

Rujuk sampel [Next.js Webpack Config](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/next.config.js) kami untuk bimbingan konfigurasi projek anda.

Panduan kerangka tambahan untuk Vite dan Remix tersedia [di sini](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup).

**4. Semak perubahan besar dalam `wagmi`**

Jika anda menggunakan cangkuk `wagmi` dalam aplikasi anda, anda perlu mengikuti panduan migrasi `wagmi` ke v1.

[Anda boleh melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide).

### Perubahan besar 0.12.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke `0.12.x`.

RainbowKit telah mengadopsi penyambung `WalletConnectLegacyConnector` dalam `wagmi` untuk meneruskan sokongan WalletConnect v1. Sokongan untuk WalletConnect v2 dan `WalletConnectConnector` akan tersedia sebagai pelepasan tampalan tanpa perubahan besar.

Dompet akan ditekan secara automatik dalam pelepasan masa depan.

Setiap dApp kini mesti menyediakan `projectId` [WalletConnect Cloud](https://cloud.walletconnect.com/) untuk membolehkan WalletConnect v2. Ini mesti disiapkan sebelum pelayan jambatan WalletConnect v1 ditutup pada 28 Jun, 2023. RainbowKit akan lebih suka v1 untuk semua dompet jika `projectId` tidak disebutkan.

Ikut langkah di bawah untuk beralih.

#### 1. Naik taraf RainbowKit dan `wagmi` ke versi terkini

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### 2. Sediakan projectId WalletConnect Cloud

Setiap dApp yang bergantung pada WalletConnect kini perlu mendapatkan `projectId` dari [WalletConnect Cloud](https://cloud.walletconnect.com/). Ini adalah percuma sepenuhnya dan hanya mengambil masa beberapa minit sahaja.

Sediakan `projectId` kepada `getDefaultWallets` dan penyambung dompet RainbowKit individu seperti berikut:

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### Perubahan besar 0.11.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke `0.11.x`.

Ikut langkah di bawah untuk beralih.

#### 1. Naik taraf RainbowKit dan `wagmi` ke versi terkini

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### 2. Semak perubahan besar dalam `wagmi`

Jika anda menggunakan cangkuk `wagmi` dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam `wagmi`.

[Anda boleh melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#011x-breaking-changes).

### Perubahan besar 0.10.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke `0.10.x`.

Ikut langkah di bawah untuk beralih.

#### 1. Naik taraf RainbowKit dan `wagmi` ke versi terkini

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### 2. Semak perubahan besar dalam `wagmi`

Jika anda menggunakan cangkuk `wagmi` dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam `wagmi`.

[Anda boleh melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#010x-breaking-changes).

### Perubahan besar 0.9.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke `0.9.x`.

Ikut langkah di bawah untuk beralih.

#### 1. Naik taraf RainbowKit dan `wagmi` ke versi terkini

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### 2. Semak perubahan besar dalam `wagmi`

Jika anda menggunakan cangkuk `wagmi` dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam `wagmi`.

[Anda boleh melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#09x-breaking-changes).

### Perubahan besar 0.8.x

Kebergantungan rakan sebaya wagmi telah dikemaskini ke `0.8.x`.

Ikut langkah di bawah untuk beralih.

#### 1. Naik taraf RainbowKit dan `wagmi` ke versi terkini

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### 2. Semak perubahan besar dalam `wagmi`

Jika anda menggunakan cangkuk `wagmi` dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam `wagmi`.

[Anda boleh melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#08x-breaking-changes).

### Perubahan besar 0.7.x

Jika anda membuat senarai dompet khsusus, anda kini mesti mengimport setiap dompet secara individu untuk mengurangkan saiz bundel. Perhatikan bahawa kerana dompet tidak lagi dilampirkan melalui objek `wallet`, semua dompet sekarang mempunyai akhiran `Wallet`.

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

Perhatikan juga bahawa lapisan keserasian kebelakang Steakwallet telah dikeluarkan. Omni harus digunakan sebaliknya.

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### Perubahan besar 0.4.x

RainbowKit telah mengemaskini kebergantungan rakan sebaya `wagmi` ke `0.5.x`.

Ikut langkah di bawah untuk beralih.

#### 1. Naik taraf kebergantungan

Naik taraf RainbowKit dan wagmi ke versi terkini

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### 2. Semak perubahan besar dalam `wagmi`

Jika anda menggunakan cangkuk `wagmi` dalam aplikasi anda, anda perlu menyemak jika aplikasi anda terjejas oleh perubahan besar dalam `wagmi`.

[Anda boleh melihat panduan migrasi mereka di sini](https://wagmi.sh/react/migration-guide#05x-breaking-changes).

### Perubahan besar 0.3.x

Mengeluarkan parameter `chainId` dari `createConnector` pada jenis `Wallet`.

**Perhatikan bahawa semua dompet terbina dalam menggunakan API baru. Kebanyakan pengguna tidak akan terjejas. Perubahan ini hanya mempengaruhi pengguna yang telah mencipta/menggunakan [dompet khusus](/docs/custom-wallets).**

Jika anda sebelum ini memperoleh URL RPC dari `chainId` pada `createConnector`, anda kini boleh mengeluarkan logik tersebut kerana `wagmi` kini mengendalikan URL RPC secara dalaman semasa digunakan dengan `configureChains`.

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### Perubahan besar 0.2.x

RainbowKit telah mengemaskini kebergantungan rakan sebaya `wagmi` ke `^0.4`.

Ikut langkah di bawah untuk beralih.

#### 1. Naik taraf kebergantungan

Naik taraf RainbowKit dan wagmi ke versi terkini

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### 2. Ganti import configureChains

Import `configureChains` dari wagmi dan bukan RainbowKit:

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### 3. Migrasi penyedia 

RainbowKit tidak lagi mengeksport API `apiProvider`. Gantikannya dengan penyedia yang diingini dari wagmi.

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### Alchemy

Import `alchemyProvider` dari `wagmi/providers/alchemy`.

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Infura

Import `infuraProvider` dari `wagmi/providers/infura`.

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

Import `jsonRpcProvider` dari `wagmi/providers/jsonRpc`.

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### Penyedia awam

Import `publicProvider` dari `wagmi/providers/public`.

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### 4. Namakan semula penyedia wagmi

Namakan semula `WagmiProvider` kepada `WagmiConfig`.

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

Dan anda selesai! 🌈
